<template>
	<view>
		<view class="tabs flex">
			<view class="flex-center" :class="{active:tabIndex == 0}" @click="changeTab(0)">全部</view>
			<view class="flex-center" :class="{active:tabIndex == 1}" @click="changeTab(1)">待付款</view>
			<view class="flex-center" :class="{active:tabIndex == 2}" @click="changeTab(2)">待发货</view>
			<view class="flex-center" :class="{active:tabIndex == 3}" @click="changeTab(3)">待收货</view>
			<view class="flex-center" :class="{active:tabIndex == 4}" @click="changeTab(4)">待评价</view>
			<view class="flex-center" :class="{active:tabIndex == 5}" @click="changeTab(5)">待确认</view>
		</view>
		<view class="list-box">
			<navigator :url="'/pages/user/orderDetail?status='+tabIndex" hover-class="none" class="list-item" v-for="(item,index) in 10" :key="'a1'+index">
				<view class="top flex-between">
					<view class="left">订单号：132456789</view>
					<view class="right">
						<text>待支付</text>
				<!-- 		<text>待发货</text>
						<text>待收货</text>
						<text>待评价</text>
						<text>待确认</text> -->
					</view>
				</view>
				<view class="middle flex-between">
					<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
					<view class="right flex-between">
						<view class="name">商品名称商品名称商品名称商品名称</view>
						<view class="price">￥25.00</view>
					</view>
				</view>
				<view class="next flex">
					共2件商品 <text>￥101.22</text>
				</view>
				<view class="bottom flex" @click.stop>
					<view class="flex-center">取消订单</view>
					<view class="red flex-center">立即支付</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:1
			}
		},
		onLoad(options) {
			this.tabIndex = Number(options.type)
		},
		methods: {
			changeTab(index){
				this.tabIndex = index
			},
		}
	}
</script>

<style lang="less">
	@main-color:#039702;
	.tabs{
		background: white;
		padding: 0 30rpx;
		position: fixed;
		top:0px;
		width: 100vw;
		padding: 0 30rpx;
		z-index: 1;
		box-sizing: border-box;
		view{
			width: calc(100% / 3);
			height: 70rpx;
			font-size: 30rpx;
			color:#999;
			&.active{
				color:@main-color;
				position: relative;
				&::after{
					content:"";
					display: block;
					width: 60rpx;
					height: 4rpx;
					position: absolute;
					bottom:0;
					background: @main-color;
					left:calc(50% - 30rpx);
				}
			}
		}
	}
	.list-box{
		padding: 90rpx 0 30rpx;
		.list-item{
			background: #fff;
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			.top{
				height: 80rpx;
				font-size: 32rpx;
				.right{
					color:#F56723;
				}
			}
			.middle{
				align-items: flex-start;
				image{
					width: 200rpx;
					height: 200rpx;
				}
				.right{
					width: 460rpx;
					height: 200rpx;
					flex-direction: column;
					align-items: flex-start;
					.name{
						font-size: 34rpx;
						font-weight: bold;
					}
					.price{
						font-size: 34rpx;
						color:red;
					}
				}
				
			}
			.next{
				justify-content: flex-end;
				height: 60rpx;
				font-size: 32rpx;
				text{
					font-weight: bold;
					color:red;
					margin-left: 20rpx;
				}
			}
			.bottom{
				justify-content: flex-end;
				height: 100rpx;
				border-top: 2rpx solid #eee;
				view{
					width: 160rpx;
					border:2rpx solid #aaa;
					height: 50rpx;
					border-radius: 30rpx;
					margin-left: 30rpx;
					font-size: 24rpx;
					&.red{
						color:red;
						border-color: red;
					}
				}
			}
		}
	}
</style>
